<template>
  <!-- 风玫瑰图 -->
  <view class="conter">
    <cc-goback title='风玫瑰图' color="#fff"></cc-goback>
    <view class="navigation_head"></view>
    <view class="head">
      <view class="box">
          <view class="head_left">
          <uni-datetime-picker type="date" :value="date" start="2020-6-15" end="2025-6-15" @change="dateChange"></uni-datetime-picker>
          </view>
          <view class="head_right">
            <image src="../../static/data_analysis/rili.png" mode=""></image>
          </view>
      </view>
      <view class="box_a">
          <view class="head_left">
           <uni-datetime-picker type="date" :value="date" start="2020-6-15" end="2025-6-15" @change="dateChange_a"></uni-datetime-picker>
          </view>
          <view class="head_right">
            <image src="../../static/data_analysis/rili.png" mode=""></image>
          </view>
      </view>
    </view>
      <view class="head_a">
      <view class="head_word">
       <ms-dropdown-menu>
          <ms-dropdown-item @input="mileage" v-model="value" :list="All_enterpriseList"></ms-dropdown-item>
        </ms-dropdown-menu>
      </view> 
      </view>
    <!-- 风玫瑰图 -->
    <view class="foot">
      <view class="region">
        <echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts>
      </view>
    </view>
  </view>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue';
  import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
  import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
  export default {
    components: {
      echarts,
      msDropdownMenu,
      msDropdownItem
    },
    data() {
      return {
        date:'',
        value:0,
        All_enterpriseList:[],
        enterprise_id:'',
        startTime:'',
        endTime:'',
        option:{
          angleAxis: {
            type: 'category',
            data: ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE' ,'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW' ,'NW', 'NNW']
          },
          radiusAxis: {},
          polar: {},
          series: [{
            type: 'bar',
            data: [1, 2, 3, 4, 3, 5, 1,1, 2, 3, 4, 3, 5, 1,9,8],
            coordinateSystem: 'polar',
            name: 'A',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          }, {
            type: 'bar',
            data: [2, 4, 6, 1, 3, 2, 1,2, 4, 6, 1, 3, 2,2, 4, 6],
            coordinateSystem: 'polar',
            name: 'B',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          }, {
            type: 'bar',
            data: [1, 2, 3, 4, 1, 2, 5,1, 2, 3, 4, 1, 2, 5,1, 2],
            coordinateSystem: 'polar',
            name: 'C',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          }],
          // legend: {
          //   bottom:10,
          //   show: true,
          //   data: ['A', 'B', 'C']
          // }
        }
      }
    },
    onLoad() {
      this.getAll_enterprise()
    },
    methods: {
      // 查询企业的总数和企业检测详情
      getAll_enterprise(){
      	this.$http.get('/device/group/customerId',{}).then(res=>{
          console.log('res', res)
          if(res.code=='00000'){
            const list = []
            res.data.forEach((item,index)=>{
              list.push(
               { 
                text:item.abbreviation,
                id:item.id,
                value:index+1
                }
              )
            })
            list.unshift(
            {
             text:'选择企业',
             value:0
             }
            )
            // console.log('list', list)
            this.All_enterpriseList = list
          }
      	})
      }, 
       // 获取玫瑰图数据
      getRose(){
      	this.$http.get('/envirnment-air/app/analysis/windRose/index',{
          date:this.startTime+','+this.endTime,
          enterpriseId:this.enterprise_id
        }).then(res=>{
          console.log('res', res)
      	})
      },  
      mileage(e) {
        this.enterprise_id = e.id
        // console.log('enterprise_id',this.enterprise_id);
        this.getRose()
      },
      dateChange(e){
       this.startTime = e
       // console.log('0000',this.startTime)
      },
      dateChange_a(e){
        this.endTime = e
        // console.log('0000',this.endTime)
      },
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
    }
  }
</script>

<style lang="scss">
  .conter {
    height: 100vh;
    background: #F7F7F7;
    overflow: hidden;
  }

  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }

  .head {
  width: 702rpx;
  height: 80rpx;
  margin: 20rpx auto;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  }
  .box{
    width: 47%;
    background-color: #FFFFFF;
    border-radius: 8rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  } 
  .box_a{
    width: 47%;
    background-color: #FFFFFF;
    border-radius: 8rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .head_left {
    margin-left: 20rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
  }

  .head_right {
    margin-right: 30rpx;
    image {
      width: 24rpx;
      height: 24rpx;
    }
  }

  .head_a {
    width: 702rpx;
    height: 80rpx;
    margin: 20rpx auto;
    overflow: hidden;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
  }

  .foot{
    padding-top: 50rpx;
    width: 702rpx;
    height: 660rpx;
    margin: 20rpx auto;
    border-radius: 8rpx;
    background-color: #FFFFFF;
    overflow: hidden;
  }
  // .region{
  //   transform: translateY(-10%);
  // }
</style>
